<template>
	<view class="map-container">
		<u-navbar title="" back-text="地址选择" :is-back="true" :background="{ background: '#000' }"
			:back-text-style="{color:'#FFF'}" back-icon-color="#FFF"> </u-navbar>
		<view class="search">
			<u-search v-model="search" @input="input" @search="onSearch" @change="change" @custom="onSearch()"> </u-search>
		</view>
		<view class="result-list" v-if="showListView">
			<view class="item1" v-for="(e, i) in listView" :key="i" @click="reCenter(e)">
				<view class="title" v-html="e.titleV"></view>
				<view class="addr" v-html="e.addressV"></view>
			</view>
		</view>

		<view class="list">
			<radio-group @change="radioChange">

				<view class="item" v-for="(e, i) in curlist" :key="i">
					<view>
						<view class="title" v-html="e.title"></view>
						<view class="addr">{{ e.address }}</view>
					</view>
					<radio :value="e.id" :checked="e.id == curid" />
				</view>
			</radio-group>
		</view>
		<map id="map" subkey="NXZBZ-PLNCR-WDNWR-W5EPB-LGCHQ-FOF3B" :longitude="myLongitude" :latitude="myLatitude"
			:scale="13" @regionchange="regionchange" :markers="markers" show-location>
		</map>
	</view>
</template>

<script>
	// let QQMapWX = require("./qqmap-wx-jssdk.min"); // vue2 版本方式
	import * as QQMap from "qqmap-wx-jssdk" // vite 编译模式
	var QQMapWX = QQMap.default
	let qqmapsdk;
	export default {
		components: {},
		data() {
			return {
				search: "",
				list: [],
				showListView: false,
				listView: [],
				curlist: [],
				curid: '',
				myLatitude: 22.55,
				myLongitude: 113.93,
				longitude: 0,
				mapCtx: null,
				markers: [{
					id: 0,

					longitude: 22.19,
					latitude: 120.12,
					width: 60,
					height: 60,
					callout: {
						content: "xxx",
						color: "#000000",
						fontSize: "32px",
						anchorX: "30px",
						anchorY: "30px",
						display: "ALWAYS",
					},
				}, ],
				mapInfo: {},
			};
		},
		created() {
			this.mapInfo = this.$store.mapInfo;
			qqmapsdk = new QQMapWX({
				key: "NXZBZ-PLNCR-WDNWR-W5EPB-LGCHQ-FOF3B"
			});
			var th = this;
			wx.getLocation({
				type: "wgs84",
				success: function(res) {
					console.log("获取到坐标", res);
					th.myLongitude = res.latitude; // latitude
					th.myLatitude = res.longitude;
					th.getCenterPoint();
				},
			});
		},
		regionchange(e) {
			console.log("移动中");
			this.getCenterPoint();
		},
		mounted() {
			//this.getCenterPoint();
		},
		computed: {
			Info() {
				return this.$store.getters.getMapInfo;
			},
		},
		methods: {
			radioChange(e) {
				console.log("radioChange()  ", e, this.curid);
				this.curid = e.detail.value;
				var tmp = this.curlist.filter(e => e.id == this.curid)[0]
				this.$store.dispatch("asyncMap", tmp);
				this.toPage("/pages/publish/index")
			},
			change(e) {
				console.log("change()", e)
				this.search = e
			},
			input(e) {
				console.log("input()", e)
				this.search = e;
			},
			onSearch() {
				var th = this;
				console.log("search() 触发查询", 1, this.search, 2, !this.search.trim());
				if (!this.search.trim()) return;

				qqmapsdk.search({
					keyword: this.search,
					success: function(res) {
						console.log("search()", res);
						th.list = res.data;
						th.doList();
						th.showListView = true;
					},
					fail: function(res) {
						console.log(res);
					},
					complete: function(res) {},
				});
			},
			reCenter(item) {
				console.log("重新选择一个中心", item); // location: {lat: 22.539752, lng: 114.053914}
				this.myLatitude = item.location.lat;
				this.myLongitude = item.location.lng;
				this.markers = [{
					id: 0,
					// iconPath: "./location.png",
					latitude: item.location.lat,
					longitude: item.location.lng,
					width: 60,
					height: 60,
					callout: {
						content: item.title,
						color: "#000000",
						fontSize: "32px",
						anchorX: "30px",
						anchorY: "30px",
						display: "ALWAYS",
					},
				}, ];
				this.showListView = false;
				this.getCenterPoint();
			},
			regionchange(e) {
				console.log("移动中");
				this.getCenterPoint();
			},
			getCenterPoint() {
				var th = this;
				th.mapCtx = wx.createMapContext("map");
				th.mapCtx.getCenterLocation({
					success: function(res) {
						console.log("移动时候的信息", res);
						th.markers = [{
							id: 0,
							// iconPath: "./location.png",
							longitude: res.longitude,
							latitude: res.latitude,
							width: 60,
							height: 60,
							callout: {
								content: th.text,
								color: "#000000",
								fontSize: "32px",
								anchorX: "30px",
								anchorY: "30px",
								display: "ALWAYS",
							},
						}, ];
						th.getPoiList(res.longitude, res.latitude);
					},
				});
			},
			/**
			 * 详情见官方API配置:http://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html
			 */
			getPoiList(longitude, latitude) {
				let th = this;
				qqmapsdk.reverseGeocoder({
					location: {
						latitude: latitude,
						longitude: longitude,
					},
					get_poi: 1,
					poi_options: "address_format=short;policy=2;radius=3000;page_size=10;page_index=1",
					success: function(res) {
						th.title = res.result.pois[0].title;
						th.curlist = res.result.pois;
					},
					fail: function(res) {
						console.log(res);
					},
					complete: function(res) {},
				});
			},
			doList() {
				var str = this.search.trim();
				this.listView = this.list.map((e) => {
					var tmp = e;
					tmp.titleV = e.title.split(str).join(`<span>${str}</span>`);
					tmp.addressV = e.address.split(str).join(`<span>${str}</span>`);
					return tmp;
				});
				this.showListView = true;
			},

			add() {
				this.$store.dispatch("addAction", Number(1));
			},
			obj() {
				this.$store.dispatch("asyncApiUserInfo", {
					name: "WZXX",
					age: 11
				});
			},
		},
	};
</script>

<style lang="scss">
	.map-container {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		#map {
			width: 100%;
			height: 70%;
		}

		.map {
			width: 100%;
			height: 100%;
		}
        .search{
			padding: 10px;
		}
		cover-image {
			width: 30rpx;
			height: 30rpx;
		}

		.list {
			text-align: left;
			padding: 0 10px;
			background: #fff;
			color: #000;
			height: 40vh;
			overflow: auto;
			z-index: 99;
			border-radius: 10px 10px;
			position: fixed;
			bottom: 0;
			width: 96%;
			margin-left: 2%;
			box-sizing: border-box;
		}
 
		.each {
			display: flex;
			justify-content: space-between;
			padding: 10px 0;
			border-bottom: 2px solid #fff;
		}
        .title{
			font-size: 14px;
		} 
		.name {
			font-size: 18px;
			font-weight: 600;
			margin-bottom: 5px;
			color: #000;
		}

		.addr {
			font-size: 12px;
			color: #ccc;
			min-height: 10px;
		}

		cover-view {
			padding: 2%;
			text-align: center;
			color: #fff;
		}

		/*  搜索结果的页面 */
		.result-list {
			text-align: left;
			padding: 0 10px;
			background: #fff;
			color: #000;
			height: 20vh;
			overflow: auto;
			position: fixed; 
			width: 100%;
			box-sizing: border-box;
			z-index: 99;
		}

		span {
			color: RED;
		}

		.item {
			display: flex;
			justify-content: space-between;
		}

		.item1 {
			margin: 4px 0
		}

		radio-group {
			width: 100%;
			padding-top: 10PX;
		}

		radio .wx-radio-input {
			background: #fff;
			background: transparent;
			border: 1px solid #eee;
		}

		radio .wx-radio-input.wx-radio-input-checked {
			border-color: #ffca28 !important;
			background: #fff !important;
			border: 1px solid #ffca28;
		}

		radio .wx-radio-input.wx-radio-input-checked::before {
			content: "";
			width: 15px;
			height: 15px;
			border-radius: 50%;
			background-color: #ffca28;
		}
	}
</style>
